<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/jslib/common/css/cssreset.css">
    <link rel="stylesheet" href="/jslib/common/css/common.css">
    <link rel="stylesheet" href="/jslib/login/css/login.css">
    <script src="/jslib/jquery/jquery.min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
    $(function () {
        //得到焦点
        $("#password").focus(function () {
            $("#left_hand").animate({
                left: "150",
                top: " -38"
            }, {
                step: function () {
                    if (parseInt($("#left_hand").css("left")) > 140) {
                        $("#left_hand").attr("class", "left_hand");
                    }
                }
            }, 2000);
            $("#right_hand").animate({
                right: "-64",
                top: "-38px"
            }, {
                step: function () {
                    if (parseInt($("#right_hand").css("right")) > -70) {
                        $("#right_hand").attr("class", "right_hand");
                    }
                }
            }, 2000);
        });
        //失去焦点
        $("#password").blur(function () {
            $("#left_hand").attr("class", "init_left_hand");
            $("#left_hand").attr("style", "left:100px;top:-12px;");
            $("#right_hand").attr("class", "init_right_hand");
            $("#right_hand").attr("style", "right:-112px;top:-12px");
        });
    });
    //回车
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13) { // enter 键
            login_post();
        }
    }
    //登录
    var login_post = function () {
        debugger;
        var userName = $("input[name ='userName']").val();
        var userPwd = $("input[name ='userPwd']").val();
        if (userName.length == 0) {
            $("#errorMessage").html("请输入登录名!");
            return false;
        } else if (userPwd.length == 0) {
            $("#errorMessage").html("请输入密码！");
            return false;
        }
        $("form").submit();
    }


</script>
<body>
<div class="top"></div>
<div class="login_content">
    <div class="login_cat">
        <div class="tou"></div>
        <div class="init_left_hand" id="left_hand"></div>
        <div class="init_right_hand" id="right_hand"></div>
    </div>
    <form action="./login_post" method="post">
        <p class="p_name">
            <span class="u_logo"></span>
            <%--
                        <input type="text" class="ipt" value="${userName}" name="userName" placeholder="请输入用户名或邮箱"/>
            --%>
            <input type="text" class="ipt" value="admin" name="userName" placeholder="请输入用户名或邮箱"/>

        </p>

        <p class="p_pass">
            <span class="p_logo"></span>
            <input type="password" id="password" class="ipt" value="666666" name="userPwd" placeholder="请输入密码"/>
        </p>

        <div class="p_button">
            <p class="p_content">
            <span class="fl">
            <a href="#">忘记密码?</a>
                </span>
            <span class="fr">
                <span id="errorMessage" class="errorMessage">${message}</span>
                <a href="#">注册</a>
                <a href="#" onclick="login_post()" class="bt">登录</a>
            </span>
            </p>
        </div>
    </form>
</div>
</body>
</html>